<style lang="scss" scoped>
.box {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
}

.serart {
    line-height: 50px;
}

.main {
    display: flex;
    flex: 1;

    .left {
        width: 100px;
        height: 90vh;
        overflow-y: scroll;

        li {
            line-height: 50px;
            background-color: rgb(245, 245, 245);
            text-align: center;
        }

        .active {
            color: rgb(30, 111, 255);
            background-color: #fff;
        }
    }

    .right {
        flex: 1;
        display: flex;
        flex-direction: column;
        height: 90vh;
        overflow-y: scroll;

        .rightUl {
            display: flex;
            width: 100%;
            height: 70px;
            flex-wrap: wrap;

            .category {
                padding: 5px;
                margin: 3px;
                float: left;
                line-height: 20px;
                background-color: #ececec;
            }

            .active {
                color: rgb(30, 111, 255);
                background-color: rgb(240, 245, 253);
            }

            .more-category,
            .more-category {
                padding: 5px;
                margin: 3px;
                float: left;
                line-height: 20px;
                background-color: #ececec;
            }
        }

        .rightUl1 {
            display: flex;
            flex-direction: column;
            position: fixed;
            z-index: 999;
            height: 100vh;

            .rightbox {

                height: 250px;
                flex-wrap: wrap;
                display: flex;

                background-color: #fff;

                .category {
                    padding: 5px;
                    margin: 3px;
                    float: left;
                    line-height: 20px;
                    background-color: #ececec;
                }

                .active {
                    color: rgb(30, 111, 255);
                    background-color: rgb(240, 245, 253);
                }

                .more-category,
                .more-category {
                    padding: 5px;
                    margin: 3px;
                    float: left;
                    line-height: 20px;
                    background-color: #ececec;
                }
            }

            .rightFooter {
                flex: 1;
                background-color: rgba(0, 0, 0, .6);
                height: 80vh;
            }
        }

        .ListData {
            overflow-y: scroll;
            height: 100vh;
        }

        dl {
            display: flex;

            dt {
                padding: 10px;

                img {
                    width: 50px;
                    height: 50px;
                }
            }

            dd {
                display: flex;
                flex-direction: column;

                .divtitle {
                    display: flex;
                    align-items: center;
                    height: 30px;

                    span {
                        padding: 2px;
                        font-size: 8px;
                        color: #fff;
                        background-color: rgb(248, 86, 54);
                        border-radius: 10px;
                    }

                    h3 {
                        margin-left: 5px;
                    }
                }

                .divspan {
                    font-size: 12px;
                    color: rgb(155, 155, 155);
                    line-height: 20px;
                }

                .divKu {
                    span {
                        font-size: 12px;
                        color: rgb(155, 155, 155);
                        line-height: 20px;
                    }
                }

                .divMoeny {
                    display: flex;
                    justify-content: space-between;
                    padding: 10px;
                    z-index: 99;

                    span {
                        font-size: 16px;
                        color: rgb(248, 86, 54);
                        font-weight: 600;
                    }

                    button {
                        line-height: 30px;
                        border: none;
                        background-color: rgb(30, 111, 255);
                        color: #fff;
                        border-radius: 50px;
                        width: 50px;
                    }
                }
            }
        }
    }
}

.buttonDl {
    position: fixed;
    bottom: 50px;
    left: 0;

    .swipe-cell {
        border-radius: 20px;
        // margin: 10px;
    }
}

.footer {
    width: 100%;
    height: 50px;
    background-color: #394564;
    position: fixed;
    bottom: 0;
    border-radius: 25px;
    display: flex;
    align-items: center;
    color: #fff;
    z-index: 999999;
    justify-content: space-between;
    padding: 0 10px;

    h3 {
        display: flex;
    }

    .van-button {
        border-radius: 50px;
    }
}
</style>
<template>
    <div class="box">
        <!-- 顶部搜索 -->
        <div class="serart">
            <van-search v-model="value" placeholder="请输入搜索关键词"></van-search>
        </div>
        <div class="main">
            <!-- 左侧症状 -->
            <div class="left">
                <li v-for="(v, i) in ListTap" :key="i" :class="cuuntink === i ? 'active' : ''"
                    @click="header(v.restorativesstatename, i)">
                    {{ v.restorativesstatename }}</li>
            </div>
            <!-- 右侧药品 -->
            <div class="right">
                <!-- 症状的收起状态 -->
                <div class="rightUl" v-if="!flag">
                    <div v-for="(category, index) in visibleCategories" :class="NumList === index ? 'active' : ''"
                        :key="index" class="category" @click="selectCategory(category, index)">
                        {{ category }}
                    </div>
                    <div v-if="isMoreExpanded" class="more-category" @click="toggleMoreS">更多</div>
                    <div v-else class="more-category" @click="toggleMoreZ">收起</div>
                </div>
                <!-- 症状的展示状态 -->
                <div class="rightUl1" v-else>
                    <div class="rightbox">
                        <div v-for="(category, index) in visibleCategories" :class="NumList === index ? 'active' : ''"
                            :key="index" class="category" @click="selectCategory1(category, index)">
                            {{ category }}
                        </div>
                        <div v-if="isMoreExpanded" class="more-category" @click="toggleMoreS">更多</div>
                        <div v-else class="more-category" @click="toggleMoreZ">收起</div>
                    </div>
                </div>
                <div class="ListData">
                    <!-- 符合症状的药品 -->
                    <dl v-for="(v, i) in ListData" :key="i" @click="router.push('/cartitem?id=' + v.restorativesid)">
                        <dt><img :src="v.restorativesimage" alt=""></dt>
                        <dd>
                            <div class="divtitle">
                                <span>{{ v.restorativestitle }}</span>
                                <h3>{{ v.restorativesname }}</h3>
                            </div>
                            <div class="divspan">
                                <div class="van-multi-ellipsis--l2">{{ v.restorativesdesc }}</div>
                            </div>
                            <div class="divKu">
                                <span>库存:{{ v.restorativescount }}</span>
                            </div>
                            <div class="divMoeny">
                                <span>￥{{ v.restorativesprice }}</span>
                                <button @click="AddItem(v)">添加</button>
                            </div>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
        <!-- 底部的购买 -->
        <div class="footer">
            <div class="eee" style="display: flex; align-items: center; margin-left: 20px">
                <van-icon name="cart" :badge="CountLang()" size="30" @click="DiTan" />
                <h3>合计:{{ zongjia() }}</h3>
            </div>
            <van-button type="primary" class="eee" @click="router.push('/more')">确定</van-button>
        </div>
        <!-- 底部弹框 -->
        <van-popup v-model:show="showBottom" position="bottom" :style="{ height: '50%' }" class="buttonDl">
            <div style="width: 100%;height: 40px;display: flex;justify-content: space-between;align-items: center;">
                <h2>药品清单</h2>
                <div style="display: flex;align-items: center;">
                    <van-icon name="delete-o" size="20" /><span style="font-size: 15px;" @click="QingKong">清空</span>
                </div>
            </div>
            <div v-for="(item, index) in cartList" :key="index" style="display: flex;width: 100vw; min-height: 120px;">
                <van-swipe-cell class="swipe-cell">
                    <van-card style="width: 100vw;" :num=item.count :price=item.restorativesprice
                        :desc=item.restorativesdesc :title=item.restorativesstate :thumb="item.restorativesimage">
                        <template #footer>
                            <van-stepper v-model="item.count" style="margin-left: 180px;" />
                        </template>
                    </van-card>
                    <template #right>
                        <van-button style="height: 100%;" @click="DeleteItem(item.restorativesid)" square text="删除"
                            type="danger" class="delete-button" />
                    </template>
                </van-swipe-cell>
            </div>
            <!-- 提交订单栏 -->
            <van-submit-bar :price="zongjia" button-text="提交订单">
                <!-- 全选复选框 -->
                <van-checkbox v-model="checked">全选</van-checkbox>
            </van-submit-bar>
        </van-popup>
    </div>
</template>
<script lang="ts" setup>
import router from '@/router';
import { useCartStore } from '@/stores/cart';
import axios from 'axios';
import { computed, ref } from 'vue';
import type { DataYao } from '@/Type/indeType';
import { showConfirmDialog } from 'vant';
const value = ref('');
// 定义[]左侧症状
const ListTap = ref<TapList[]>([]);
// 定义[]右侧症状
const ListData = ref<DataYao[]>([]);
// 默认定义当前索引
const cuuntink = ref(0)
// 点击获取点击当前的文字
const header = (v: string, i: number) => {
    cuuntink.value = i
    getData(v)
}
// 定义类型
interface TapList {
    restorativesstatename: string
}
// 分装axios请求获取左tap
axios.get('/api/restorative/type').then(res => {
    ListTap.value = res.data.data
})
// 定义页面
const pageCode = ref(1)
const pageSize = ref(10)


const isMoreExpanded = ref(true);
const initialCategories = ['全部', '心脑血管', '男科用药', '神经系统', '内分泌类'];
const allCategories = [
    '全部', '心脑血管', '男科用药', '神经系统', '内分泌类',
    '泌尿系统', '皮肤用药', '儿科用药', '妇科用药', '肝胆用药',
    '滋补调养', '清热解毒', '呼吸用药', '五官用药', '肠胃消化',
    '维矿物质', '精神心理', '风湿骨痛', '肿瘤用药', '糖尿病类',
    '抗菌消炎', '母婴用药', 'HPV疫苗'
];
const flag = ref(true)
const toggleMoreS = () => {
    isMoreExpanded.value = false
    flag.value = false
};
const toggleMoreZ = () => {
    isMoreExpanded.value = true
    flag.value = true
}
const NumList = ref(0)
const TextTap = ref('')
const selectCategory = (category: string, index: number) => {
    NumList.value = index
    getData(category)
    TextTap.value = category
    // 这里可以添加逻辑来处理选择的类别
};
const selectCategory1 = (category: string, index: number) => {
    NumList.value = index
    // 传入选择的类别
    getData(category)

    // 这里可以添加逻辑来处理选择的类别
};
// 将右侧药品列表数据存储在ListTap中
const getData = (text: string) => {
    flag.value = false
    isMoreExpanded.value = false
    axios.get('/api/restorative/list', { params: { pageCode: pageCode.value, pageSize: pageSize.value, state: text } }).then(res => {
        ListData.value = res.data.data
    })
}
// 默认传参为空字符串，即获取全部药品列表
getData('')

const visibleCategories = computed(() => isMoreExpanded.value ? allCategories : initialCategories);
// 底部弹框
const showBottom = ref(false);
// 点击底部弹框出现，显示底部弹框
const DiTan = () => {
    showBottom.value = true
}
//点击添加，把这条数据添加到本地储存里
const { addCart, DeleteCart } = useCartStore()
const AddItem = (v: DataYao) => {
    addCart(v)
    // 提示成功ElMessage
    alert('添加成功')
}


// 使用购物车store
const userStore = useCartStore()
// 计算属性，获取购物车列表
const cartList = computed(() => userStore.cartList)

// 计算属性，用于全选复选框的选中状态
const checked = computed({
    get() {
        // 如果购物车列表中的所有商品都被选中，则返回true，否则返回false
        return cartList.value.every((item) => item.check)
    },
    set(val) {
        // 将购物车列表中的所有商品选中状态设置为 全选状态 val
        cartList.value.forEach((item) => {
            item.check = val
        })
    }
})
// 金额
const zongjia = () => {
    return cartList.value.reduce((total, v) => {
        return total += v.count * v.restorativesprice
    }, 0)
}
// 总数量
const CountLang = () => {
    return cartList.value.reduce((total, v) => {
        return total += v.count
    }, 0)
}
// 清空购物车
const QingKong = () => {
    showConfirmDialog({
        title: '你确定要清空吗',
        message:
            '确定清空完毕',
    })
        .then(() => {
            userStore.cartList = []
        })
        .catch(() => {
            // on cancel
        });

}
// 删除
const DeleteItem = (v: number) => {
    DeleteCart(v)
    alert('删除成功')
}
</script>